<script lang="ts" setup>
  import { ref, watch, computed } from 'vue';
  import { Space, Spin, Tabs, TabPane } from '@arco-design/web-vue';
  import { useRoute } from 'vue-router';
  import { IconEye } from '@arco-design/web-vue/es/icon';
  import { useGlobalScroll } from '/@/hooks/useScroll';
  import { queryAppPublishedArticlePage } from '/@/api/app/article';
  import type { ArticleRecord } from '/@/api/app/model/articleModel';
  import ApiColumnMenu from '/@/components/ApiColumnMenu.vue';
  import RankingList from '/@/components/RankingList.vue';
  import Introduction from '/@/components/Introduction.vue';
  import Attention from '/@/components/Attention.vue';
  import ArticleRecomm from '/@/components/ArticleRecomm.vue';

  const route = useRoute();

  const getCurrentColumnId = computed(() => {
    return parseInt(route.query.column_id as string, 10) || undefined;
  });
  // 距离底部 100 px 时触发
  const { arrivedState } = useGlobalScroll({ offset: { bottom: 100 } });
  // 文章列表
  const articleList = ref<ArticleRecord[]>([]);
  // 滚动页数
  const pageRef = ref(1);
  // 滚动时加载文章
  const articleListLoading = ref(false);
  // 触发加载文章
  const articleListFirstLoading = ref(true);

  // 加载文章
  const reloadAppPublishedArticlePage = async (checkIsFirstLoad = false) => {
    if (checkIsFirstLoad) {
      articleListFirstLoading.value = true;
    }
    if (articleListLoading.value) return;
    articleListLoading.value = true;

    const result = await queryAppPublishedArticlePage({
      column_id: getCurrentColumnId.value,
      page: pageRef.value,
      size: 20,
    });
    if (checkIsFirstLoad) {
      articleList.value = [];
    }
    articleList.value.push(...result.list);

    articleListLoading.value = false;
    articleListFirstLoading.value = false;
  };

  // 栏目变化时触发
  watch(
    getCurrentColumnId,
    () => {
      pageRef.value = 1;
      reloadAppPublishedArticlePage(true);
    },
    { immediate: true },
  );

  // 触底时加载新的文章
  watch(
    () => arrivedState.bottom,
    (isReachBottom) => {
      if (isReachBottom) {
        if (articleListLoading.value) return;
        pageRef.value++;
        reloadAppPublishedArticlePage();
      }
    },
  );
</script>

<template>
  <div class="w-[calc(100%-80px)] flex relative mx-[40px]">
    <div class="left mr-[18px]">
      <ApiColumnMenu />
    </div>
    <div class="center flex-1 min-h-[calc(100vh-13rem-1240px)]">
      <div class="mb-[10px]">
        <RankingList />
      </div>
      <div class="bg-white rounded-[3px]">
        <Tabs default-active-key="1" class="pt-[0px] recommend-tabs">
          <TabPane key="1" title="推荐" />
          <TabPane key="2" title="最新" />
        </Tabs>

        <a-list :bordered="false">
          <template #scroll-loading v-if="articleListLoading">
            <Spin :size="16" :loading="true" :dot="true" />
          </template>
          <template v-for="item in articleList" :key="item.id">
            <!-- <a class="block" :href="'/post/' + item.id" target="_blank"> -->
            <a-listItem class="posdts-list-item list-hover" action-layout="vertical">
              <template #actions>
                <span class="text-[#8A919F]"><IconEye /> {{ item.read }}</span>
                <!-- <span class="text-[#8A919F]"><IconMessage /> {{ item.recommend }}</span> -->
              </template>
              <template #extra v-if="item.cover">
                <div className="image-area" class="mt-[10px]">
                  <img
                    alt="arco-design"
                    :src="item.cover"
                    class="w-[120px] h-[90px] rounded-[3px]"
                  />
                </div>
              </template>
              <a class="block" :href="'/post/' + item.id" target="_blank">
                <a-listItemMeta>
                  <template #description>
                    <div>
                      <a-avatar class="mr-[8px]" :size="24">
                        <img alt="avatar" :src="item.user_icon" />
                      </a-avatar>
                      <span class="text-black">{{ item.user_name }}</span>
                      <a-divider direction="vertical" />
                      <span class="text-[12px] text-[#8A919F]">{{
                        $timeAgo(item.createTime)
                      }}</span>
                      <a-divider direction="vertical" />
                      <span>
                        <a-tag
                          color="gray"
                          size="small"
                          class="text-[12px] ml-[5px]"
                          v-for="(tag, index) in item.tag.split(',')"
                          :key="index"
                        >
                          {{ tag }}
                        </a-tag>
                      </span>
                    </div>
                    <div class="mt-[10px] pr-[20px]">
                      <a-typography-paragraph
                        :ellipsis="{
                          rows: 2,
                        }"
                        class="font-black text-[#252933] text-[16px] mb-[5px]"
                      >
                        {{ item.title }}
                      </a-typography-paragraph>
                      <a-typography-paragraph
                        :ellipsis="{
                          rows: 2,
                        }"
                        class="text-[#8a919f] font-[500] text-[13px] mb-[0px]"
                      >
                        {{ item.brief }}
                      </a-typography-paragraph>
                    </div>
                  </template>
                </a-listItemMeta>
              </a>
            </a-listItem>
          </template>
        </a-list>
      </div>
    </div>
    <div class="rightt w-[266px] ml-[18px]">
      <Space direction="vertical" class="w-full">
        <!-- 个人简介 -->
        <Introduction />
        <Attention />
        <ArticleRecomm />
      </Space>
    </div>
  </div>
</template>
<style scoped>
  .user-card :deep(.arco-avatar-image) {
    width: 46px;
    height: 46px;
  }

  .card-line {
    border-right: 1px solid rgba(228, 230, 235, 0.5);
  }

  .list-hover:hover {
    background: #fafafa;
  }

  .my-card :deep(.arco-card-header),
  .my-card :deep(.arco-card-body) {
    border: none;
    padding: 0;
  }

  .recommend-tabs >>> .arco-tabs-content {
    padding-top: 0px !important;
  }
</style>
